<style scoped>
  .lng-padding {
    padding: 4px 4px;
  }

  .top-bar {
    position: absolute;
    z-index: 500;
    top: 0;
    width: 100%;
  }

  .lng-flex > div {
    flex: inherit;
    white-space: nowrap;
    overflow: hidden;
  }

  .search-btn {
    margin: 1px 3px;
    padding: 1px 2px;
    color: #4791d2;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    border: 1px solid #C7C7C7;
    width: 60px;
  }

  .history-padding {
    padding-top: 40px;
  }

  .content {
    margin: 1.3rem 0 1.8rem;
  }

  .history-data-content {
    padding: 45px 0;
  }

  .custom-primary-red {
    border-radius: 4px !important;
    border-color: #4791d2 !important;
    color: #4791d2 !important;
  }
  .top-select {
    width: 200px;
  }

  .alarm-color{
    color: #f15a4a;
  }

  .alarm-low{
    color: #4791d2;
  }
</style>
<style>
  .top-bar .weui-cell {
    padding: 5px 2px;
    border: 1px solid #C7C7C7;
    border-radius: 4px;
  }
</style>


<template>
  <div>
    <div class="lng-padding top-bar lng-flex">
      <popup-picker class="top-select" :data="stationList" v-model="station" @on-show="onShow" @on-hide="onHide" show-name
                    value-text-align="left"
                    @on-change="onChange" placeholder="请选择站点"></popup-picker>

      <div class="search-btn" @click="search()">
        <i class="icon icon-search">查询</i>
      </div>
    </div>
    <div class="top-bar history-padding">
      <tab :line-width="1" active-color='#4791d2'>
        <tab-item selected @on-item-click="selectType(0)">已处理</tab-item>
        <tab-item @on-item-click="selectType(1)">未处理</tab-item>
      </tab>
    </div>

    <view-box ref="viewBox">

      <div class="content history-data-content">
        <x-table :cell-bordered="false" style="background-color:#fff;">
          <thead>
          <tr>
            <th width="90px">时间</th>
            <th>报警因子</th>
            <th>报警值</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody style="line-height:20px">
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td class="alarm-color">13.29</td>
            <td>
              <x-button @click.native="getDetail()"  mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td class="alarm-low">5.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td class="alarm-color">13.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td class="alarm-low">6.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td class="alarm-low">5.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td class="alarm-low">5.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td class="alarm-color">13.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td class="alarm-color">13.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td class="alarm-color">13.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td class="alarm-color">13.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td class="alarm-color">13.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td class="alarm-color">13.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td>13.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td>13.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td>13.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td>13.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td>13.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td>13.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td>13.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td>13.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td>13.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td>13.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>
          <tr>
            <td>2017-09-09 13：13：13</td>
            <td>储罐压力</td>
            <td>13.29</td>
            <td>
              <x-button mini plain class="custom-primary-red">详情</x-button>
            </td>
          </tr>

          </tbody>
        </x-table>
      </div>

    </view-box>

    <div v-transfer-dom>
      <confirm v-model="showScrollBox"
               title="查询"
               @on-cancel="onCancel"
               @on-confirm="onConfirm"
               @on-show="onShow"
               @on-hide="onHide">
        <div>
          开始时间
          结束时间
          数据类型
          时间跨度
          监控因子
        </div>
      </confirm>
    </div>

    <!--<div v-transfer-dom>
      <x-dialog v-model="showScrollBox" class="dialog-demo">
        <p class="dialog-title">查询</p>
        <hr>
        <div class="img-box" style="height:100px;padding:15px 0;">
          开始时间
          <datetime-view v-model="startTime" ref="datetime" :format="format"></datetime-view>
          结束时间
          <datetime-view v-model="endTime" ref="datetime" :format="format"></datetime-view>
          数据类型
          时间跨度
          监控因子
          <x-button mini plain class="custom-primary-red">确定</x-button>
        </div>
        <div @click="showScrollBox=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>-->

  </div>
</template>
<script>
  import {
    XInput,
    PopupPicker,
    Tab,
    TabItem,
    XTable,
    Card,
    ViewBox,
    XButton,
    Toast,
    Confirm,
    DatetimeView,
    TransferDomDirective as TransferDom

  } from 'vux'
  export default {
    directives: {
      TransferDom
    },
    components: {
      XInput,
      PopupPicker,
      Tab,
      TabItem,
      XTable,
      Card,
      ViewBox,
      XButton,
      Toast,
      Confirm,
      DatetimeView
    },
    data() {
      return {
        startTime: '2017-10-11',
        endTime: '2017-10-24',
        format: 'YYYY-MM-DD',
        showScrollBox:false,
        station: [],
        stationList: [[
          {
            name: '嘉兴XXX加气站',
            value: '1',
          },
          {
            name: '福州XXX加气站',
            value: '2',
          },
        ]],
      }
    },
    methods: {
      selectType(demo){
        let $this = this;
        if(demo == 0){
          $this.showTable = false;
        }else{
          $this.showTable = true;
        }
      },
      getDetail(){
          this.showScrollBox = true;
      },
      onCancel () {
        console.log('on cancel')
      },
      onConfirm (msg) {
        console.log('on confirm')
        if (msg) {
          alert(msg)
        }
      },
      search(){
        this.showSearchBox = false;
      },

      onChange (val) {
        console.log('val change', val)
      },
      onShow () {
        console.log('on show')
      },
      onHide (type) {
        console.log('on hide', type)
      }
    }
  }
</script>




